{% extends "docker_engine/base.html" %}


{% load staticfiles %}


{% block extra-css %}
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/fancybox/source/jquery.fancybox.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/gritter/css/jquery.gritter.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/uniform/css/uniform.default.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/bootstrap-daterangepicker/daterangepicker.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/jqvmap/jqvmap/jqvmap.css' %}" />
{% endblock %}


{% block content %}
<!-- BEGIN PAGE CONTENT-->
<div id="page">
    <div class="widget">
        <div class="widget-title">
            <h4><i class="icon-reorder"></i> Container Details</h4>
        </div>
        <form action="#" method="post" class="form-horizontal">
            {% csrf_token %}
            <div class="widget-body form">
                <div class="control-group">
                    <label class="control-label" for="tag">ID:</label>
                    <div class="controls">
                        <input type="text" class="span6" name="repository" value="{{ container.id }}" readonly="true" />
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="repository">Name:</label>
                    <div class="controls">
                        <input type="text" class="span6" name="repository" value="{{ container.name }}" readonly="true" />
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="tag">Command:</label>
                    <div class="controls">
                        <input type="text" class="span6" name="repository" value="{{ container.command }}" readonly="true" />
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="tag">Volumes:</label>
                    <div class="controls">
                        <input type="text" class="span6" name="repository" value="{{ container.volumes }}" readonly="true" />
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="tag">IP Address:</label>
                    <div class="controls">
                        <input type="text" class="span6" name="repository" value="{{ container.address }}" readonly="true" />
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="tag">Ports:</label>
                    <div class="controls">
                        <input type="text" class="span6" name="repository" value="{{ container.ports }}" readonly="true" />
                    </div>
                </div>
            </div>
        </form> 
    </div>           

    <hr />

    <div class="row-fluid">
        <!-- BEGIN CPU CHART PORTLET-->
        <div class="span6">
            <div class="widget6">
                <div class="widget-title">
                    <h4><i class="icon-reorder"></i> CPU Usage</h4>
                    <span class="tools">
                        <a href="javascript:;" class="icon-refresh"></a>        
                    </span>                         
                </div>
                <div class="widget-body">
                    <div id="cpu_chart" class="chart"></div>
                </div>
            </div>
        </div>
        <!-- END CPU CHART PORTLET-->


        <!-- BEGIN Memory CHART PORTLET-->
        <div class="span6">
            <div class="widget">
                <div class="widget-title">
                    <h4><i class="icon-reorder"></i> Memory Usage</h4>
                    <span class="tools">
                        <a href="javascript:;" class="icon-refresh"></a>        
                    </span>                    
                </div>
                <div class="widget-body">
                    <div id="memory_chart" class="chart"></div>
                </div>
            </div>
        </div>
        <!-- END Memory CHART PORTLET-->
    </div>

    <div class="row-fluid">
        <!-- BEGIN Disk I/O CHART PORTLET-->
        <div class="span6">
            <div class="widget">
                <div class="widget-title">
                    <h4><i class="icon-reorder"></i> Disk I/O Usage</h4>
                    <span class="tools">
                        <a href="javascript:;" class="icon-refresh"></a>        
                    </span>                   
                </div>
                <div class="widget-body">
                    <div id="disk_io_chart" class="chart"></div>
                </div>
            </div>
        </div>
        <!-- END Disk I/O CHART PORTLET-->

        <!-- BEGIN Network Traffic CHART PORTLET-->
        <div class="span6">
            <div class="widget">
                <div class="widget-title">
                    <h4><i class="icon-reorder"></i> Network Traffic Usage</h4>
                    <span class="tools">
                        <a href="javascript:;" class="icon-refresh"></a>        
                    </span>                    
                </div>
                <div class="widget-body">
                    <div id="network_traffic_chart" class="chart"></div>
                </div>
            </div>
        </div>
        <!-- END Network Traffic CHART PORTLET-->
    </div>
</div>

<!-- END PAGE CONTENT-->
{% endblock %}


{% block extra-js %}
<script src="{% static 'docker_engine/js/jquery.blockui.js' %}"></script>
<script src="{% static 'docker_engine/assets/jQuery-slimScroll/jquery-ui-1.9.2.custom.min.js' %}"></script>
<script src="{% static 'docker_engine/assets/flot/jquery.flot.js' %}"></script>
<script src="{% static 'docker_engine/assets/flot/jquery.flot.resize.js' %}"></script>
<script src="{% static 'docker_engine/assets/flot/jquery.flot.stack.js' %}"></script>
<script src="{% static 'docker_engine/assets/uniform/jquery.uniform.min.js' %}"></script>
<script src="{% static 'docker_engine/assets/fancybox/source/jquery.fancybox.pack.js' %}"></script>
<script src="{% static 'docker_engine/js/container/all.js' %}"></script>
<script src="{% static 'docker_engine/js/container/detail.js' %}"></script>
{% endblock %}